<template>
	<el-dialog
		:model-value="dialogVisible"
		title="添加目录"
		width="40%"
		:before-close="dialogBeforeClose"
		:fullscreen="true"
		custom-class="my-dialog"
	>
		<el-form ref="form" :model="formData">
			<up-image :file-path="'recallvideo'" @changeResult="changeResult" />
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="cancelForm"> 取 消 </el-button>
				<el-button type="primary" @click="submitForm"> 提 交 </el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import UpImage from '@/components/file/UpImage.vue';
import { EnumResult } from '@/assets/model/enums/EnumUtil';
import RequestUtil from '@/assets/model/common/RequestUtil';
import { recall } from '@/api';
@Options({
	components: {
		'up-image': UpImage
	},
	props: {
		dialogVisible: Boolean,
		parentId: String
	},
	emits: ['changeAdd'],
	watch: {
		parentId: (value) => {
			console.log(value);
		}
	}
})
export default class Add extends Vue {
	upLoadBtnText = '上传';
	public video = new recall.video();
	private dialogVisible: any;
	private parentId: any;
	onParentId(val: string, oldVal: string) {
		this.formData.dirId = val;
	}
	/**表单属性字段 */
	formData = {
		id: '',
		dirId: '',
		servePath: '',
		serveName: '',
		realName: '',
		listId: ''
	};

	public changeResult(fileResult: any) {
		this.formData.realName = fileResult.data.realName;
		this.formData.servePath = fileResult.data.filePath;
		this.formData.serveName = fileResult.data.fileName;
	}
	/**表单宽度 */
	formLabelWidth = '100px';
	/**控制是提交还是更新 */
	mounted() {}
	created() {
		this.formData.dirId = this.parentId;
	}
	/**dialog叉号点击方法,关闭之前拦截执行 */
	dialogBeforeClose(done: any) {
		this.cancelForm();
	}
	/**重置表单 */
	clearForm() {
		let methes: any = this.$refs['form'];
		methes.resetFields();
	}
	//取消操作
	cancelForm() {
		this.clearForm();
		this.$emit('changeAdd', false);
	}
	//提交目录信息
	submitForm() {
		let _this: any = this;
		let data = this.formData;
		let parent: any = _this.$parent;
		_this
			.$confirm('确定提交目录？', '提交提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
			.then(() => {
				RequestUtil.OperateData(this.video.addvideo(data)).then(function (response: EnumResult) {
					if (response == EnumResult.success) {
						_this.cancelForm();
						parent.refresh();
					}
				});
			})
			.catch(() => {
				_this.$message({
					type: 'info',
					message: '已取消提交'
				});
			});
	}
}
</script>

<style lang="scss"></style>
